import React from 'react'
import { Select, SelectProps, Tag, Tooltip } from 'antd'
import { connect, getState, IStoreState } from '../../store'
import { DBKey, UserPermission } from '../../../server/interface'


const _PermSelect = (props: SelectProps & Pick<IStoreState, 'perm_map'>) => {
    const { perm_map, ...rest } = props
    return (
        <Select placeholder="请选择角色权限" {...rest} options={Array.from(perm_map).map(([key, perm]) => ({
            value: key,
            label: perm.name,
        }))}/>
    )
}

export const PermSelect = connect(() => {
    const { perm_map } = getState()
    return { perm_map }
})(_PermSelect)


interface PermTagsProps {
    perms: string[];
    perm_map: Map<DBKey, UserPermission>;
    type?: 'tag' | 'paragraph'
}
const _PermTags = (props: PermTagsProps) => {
    const { perms = [], perm_map, type = 'tag' } = props
    if (type === 'tag') {
        return <>{perms.map(k => <Tag key={k}>{perm_map.get(k)?.name || k}</Tag>)}</>
    }
    if (type === 'paragraph') {
        const context = perms.map(k => perm_map.get(k)?.name || k).join(', ')
        return context && <Tooltip title={context}>
            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {context}
            </div>
        </Tooltip>
    }
    return <></>
}
export const PermTags = connect(() => {
    const { perm_map } = getState()
    return { perm_map }
})(_PermTags)